<template>
	<view class="body p30">
		<view class="card bg-white br12 p30">
			<view class="f26 fb">江门市利洁能源加气站</view>
			<view class="orange f20 mt10">加气有礼，24小时加注</view>
			<view class="d-s-c mt30">
				<view class="f20 mr30">广东省江门市江海区五邑路与永康路交叉路口往南约90米</view>
				<view class="distance d-s-c">
					<u-icon name="map" color="#FF7E11" size="10"></u-icon>
					<text class="f20">30km</text>
				</view>
			</view>
		</view>
		<view class="card bg-white br12 p30 mt30 d-b-c">
			<view class="mr20">92#</view>
			<view class="d-b-c flex-1">
				<view class="item d-c-c d-c flex-1">
					<view class="f20 mb10">利洁能源价</view>
					<view class="f30 red border-right ww100 tc">￥7.30 <text class="f20">起</text> </view>
				</view>
				<view class="item gray9 d-c-c d-c flex-1">
					<view class="f20 mb10">起点价</view>
					<view class="f30 border-right ww100 tc">￥7.30 <text class="f20">起</text> </view>
				</view>
				<view class="item gray9 d-c-c d-c flex-1">
					<view class="f20 mb10">国标价</view>
					<view class="f30 ww100 tc">￥7.30 <text class="f20">起</text> </view>
				</view>
			</view>
		</view>
		<view class="card bg-white br12 p30 mt30">
			<view class="menu d-b-c ww100 br12">
				<view class="d-c-c flex-1">
					<image src="@/static/image/icon1.png" mode="widthFix" class="mr10"></image>
					<text class="mr10 f20">LNG</text>
					<u-icon name="arrow-down-fill" color="#999" size="12"></u-icon>
				</view>
				<view class="d-c-c flex-1">
					<image src="@/static/image/icon2.png" mode="widthFix" class="mr10"></image>
					<text class="mr10 orange f20">请选择抢号</text>
					<u-icon name="arrow-down-fill" color="#999" size="12"></u-icon>
				</view>
			</view>
			<view class="price d-s-c br12 mt20 p20">
				<text class="mr10">￥</text>
				<input type="text" placeholder="请输入金额" />
			</view>
			<view class="list mt20 d-b-c">
				<view class="item br12 f30 d-c-c" v-for="(item,index) in 3" :key="index">
					￥{{index*2}}00
				</view>
			</view>
		</view>
		<u-popup mode="center" :show="popup1">
			<view class="popup1 p30">
				<view class="title f28 tc">选择品类</view>
				<view class="pl15 pr15 pt30 d-s-s d-c">
					<view v-for="(item,index) in moreList" :key="index" class="ww100">
						<view class="tl pl30 pr30">{{item.name}}</view>
						<view class="d-s-c f-w pt20 pb20">
							<view class="item flex-1 gray6 f28 d-c-c" v-for="(e,i) in item.key" :key="i">
								{{e.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="popup2">
			<view class="popup1 p30">
				<view class="title f28 tc">选择抢号</view>
				<view class="pl15 pr15 pt30 d-s-s f-w">
					<view class="item gray6 f28 d-c-c" v-for="(item,index) in list" :key="index">{{item}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popup1: false,
				popup2: true,
				moreList: [{
					name: '汽油',
					key: [{
						name: '92#',
						checked: false
					}, {
						name: '95#',
						checked: false
					}, {
						name: '98#',
						checked: false
					}]
				}, {
					name: '菜油',
					key: [{
						name: '92#',
						checked: false
					}, {
						name: '95#',
						checked: false
					}, {
						name: '98#',
						checked: false
					}]
				}],
				list: ['01枪', '02枪', '03枪', '04枪', '05枪', '06枪', '07枪', '08枪', '09枪', '10枪', '11枪', '12枪'],
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.active {
		background-color: #FF7E11;
		color: #fff;
	}

	.popup1 {
		width: 700rpx;
		background-color: #fff;

		.item {
			width: calc(33.33% - 30rpx);
			height: 60rpx;
			margin: 15rpx;
			background-color: #F7F8FA;
			border: 0;
		}

	}

	.list {
		.item {
			height: 80rpx;
			width: 180rpx;
			border: 1px solid #979797;
		}
	}

	.price {
		height: 80rpx;
		border: #C0BFBD solid 1px;

	}

	.menu {
		background-color: #FFF6EE;
		border: #FF7E11 1px solid;
		height: 80rpx;

		image {
			width: 35rpx;
		}
	}

	.card {
		.item {
			.border-right {
				border-right: 1px solid #EFEFEF;
			}
		}
	}

	.body {
		min-height: 100vh;
		background-color: #f4f4f4;
	}

	.distance {
		background-color: #EFEFEF;
		border-radius: 10rpx;
		padding: 8rpx 20rpx;
	}
</style>